웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS를 사용하는 프로젝트에서 드래그앤 드랍 구현이 필요한 경우 많이 사용되는 라이브러리, 패키지인 vuedraggable에 대하여 알아봅니다.
! vuedraggable을 사용하는 이유는?
드래그앤드랍을 하나의 어플리케이션내에서 모두 구현하려면 상당한 시간과 노력이 필요하게 됩니다. 이런 이유로 중요하면서 꼭 필요한 기능들은 라이브러리, 플러그인 형태로 많이 사용되죠. 이 중에서도 vuedraggable의 최근 npm 주간 다운로드 수치는 대략 35만 정도입니다.
매우 많은 사람들이 이를 사용하고 있으니 그 이유가 있겠죠. 개인적인 의견으로 무엇보다 사용하기가 쉽습니다. 별다른 옵션 설정이 없어도 컴포넌트 상위에 추가하면 간단히 구현이 가능합니다. 또한 시각적으로도 어떻게 드래그앤드랍이 되는지 알기 쉽게 보여줍니다.
아래는 현재 vuedraggable의 주요 특징입니다.
- 모바일 터치 디바이스 지원
- 자동 스크롤링
- vuejs 2.0의 transition-group과 호환
- 취소 기능 지원
- 기타) jQuery 디펜던시 없음
다음으로 간단한 설치 방법을 알아봅니다.
! vuedraggable 설치하기
아래와 같이 yarn 도는 npm을 사용하여 설치할 수 있습니다.
yarn add vuedraggable
npm i -S vuedraggable
npm i -S vuedraggable
또한 아래와 같이 cdn 방식으로도 역시 사용할 수 있습니다.
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
다음으로 간단한 예제입니다.
# vuedraggable 간단한 예제보기
간단한 사용 방법과 예제를 알아봅니다. 매우 간단하며 아래와 같이 드래그앤드랍이 필요한 위치에 v-model과 함께 사용하도록 합니다. 먼저 사용할 컴포넌트에 해당 모듈을 불러와 컴포넌트에 추가하도록 합니다.import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
}
}
...
export default {
components: {
draggable,
}
}
이제 해당 컴포넌트 내부에서 draggable을 사용할 수 있게되었습니다. 예를들어 myList라는 데이터를 사용하여 여러개의 드래그앤드랍이 가능하도록 구현한다면 아래와 같이 코드를 작성하도록 합니다.
<draggable v-model="myList">
<div v-for="item in myList" :key="item.no">
{{ item.name }}
</div>
</draggable>
<div v-for="item in myList" :key="item.no">
{{ item.name }}
</div>
</draggable>
위 코드를 실행하면 myList가 가진 데이터를 사용하여 드래그앤드랍이 됩니다. myList가 가진 데이터의 순서는 당연히 드래그앤드랍이 반영되어 결과로 나타나게 됩니다.
아래는 draggable에 사용 가능한 프로터티(property)들 입니다.
v-model // 드래그앤드랍 대상이 될 데이터
tag // 사용할 태그를 결정함 (Default. div)
animation // 애니메이션 속도를 나타냄
start // 시작시 호출할 함수
end // 종료시 호출할 함수
remove // 삭제시 호출할 함수
더 많이 있지만 가장 많이 사용되고 주요한 프로퍼티의 정보입니다.
@ 테이블 table 태그에서 vuedraggable를 사용하기
추가로 만약 테이블 태그를 사용한 내부에서 드래그앤드랍을 구현한다면 어떻게 할까요? 이 경우에는 tag 프로퍼티값을 사용하여 적용하는 것이 가능합니다. 아래의 코드를 봐주세요.
<table>
<thead>
...
</thead>
<draggable
tag="tbody"
v-model="tableData"
>
<tr
v-for="(row, rowIndex) in tableData"
:key="rowIndex"
>
<td>...</td>
</tr>
</draggable>
<thead>
...
</thead>
<draggable
tag="tbody"
v-model="tableData"
>
<tr
v-for="(row, rowIndex) in tableData"
:key="rowIndex"
>
<td>...</td>
</tr>
</draggable>
위 코드를 살펴보면 tag의 값으로 tbody를 사용하였습니다. 이제 해당 컴포넌트는 기본값 div가 아닌 tbody로 나타나게 되며 테이블 내에서도 동일하게 드래그앤 드랍을 사용할 수 있습니다.
여기까지 vuejs에서 vuedraggable을 사용하여 드래그앤드랍을 구현하는 방법에 대하여 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?